import React from 'react';
import { Button, Drawer } from 'antd';
import { Icon } from '@ant-design/compatible';
import { leftMenuWidth } from '../../config';
import Media from 'react-media';

class page extends React.Component {
  render() {
    const { props } = this;
    const title = props.title || '配电终端';
    const icon = props.icon || 'database';

    return (
      <Media query="(max-width: 576px)">
        {isMobile => [
          isMobile ? (
            <Button
              key="button"
              icon={icon}
              type="primary"
              onClick={() => {
                if (props.onOpen) props.onOpen();
              }}
            >
              {title}
            </Button>
          ) : (
            ''
          ),
          <Drawer
            key="drawer"
            title={
              <div>
                <Icon type={icon} style={{ fontSize: 18 }} />
                <span> {title}</span>
              </div>
            }
            visible={props.visible}
            width={leftMenuWidth + 48}
            onClose={() => {
              if (props.onClose) props.onClose();
            }}
          >
            {props.content || ''}
          </Drawer>,
        ]}
      </Media>
    );
  }
}

export default page;
